<template>
  <div class="content-wrap" id="wrap">
    <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
    <map name="Map" id="Map">
      <area id="1001" shape="rect" coords="351,363,380,381" href="javascript:void(0)" @click="a()" />
      <area id="1002" shape="rect" coords="382,363,409,381" href="javascript:void(0)" @click="b()" />
      <area id="1003" shape="rect" coords="490,363,519,381" href="javascript:void(0)" @click="c()" />
      <area id="1004" shape="rect" coords="521,363,550,381" href="javascript:void(0)" @click="d()" />
      <area id="1003" shape="rect" coords="572,363,597,381" href="javascript:void(0)" @click="h()" />
      <area id="1004" shape="rect" coords="601,363,629,381" href="javascript:void(0)" @click="i()" />
      <area id="1005" shape="rect" coords="1048,371,1076,389" href="javascript:void(0)" @click="e()" />
      <area id="1006" shape="rect" coords="1079,373,1107,389" href="javascript:void(0)" @click="f()" />
      <area id="1005" shape="rect" coords="342,712,369,731" href="javascript:void(0)" @click="j()" />
      <area id="1006" shape="rect" coords="373,713,389,732" href="javascript:void(0)" @click="k()" />
      <area id="1005" shape="rect" coords="533,723,560,742" href="javascript:void(0)" @click="m()" />
      <area id="1006" shape="rect" coords="562,722,588,739" href="javascript:void(0)" @click="n()" />
      <area id="1005" shape="rect" coords="849,721,877,743" href="javascript:void(0)" @click="o()" />
      <area id="1006" shape="rect" coords="880,721,905,740" href="javascript:void(0)" @click="p()" />
      <area id="1005" shape="rect" coords="979,627,1007,644" href="javascript:void(0)" @click="q()" />
      <area id="1006" shape="rect" coords="1009,625,1037,645" href="javascript:void(0)" @click="r()" />
      <area id="1005" shape="rect" coords="1039,723,1066,740" href="javascript:void(0)" @click="s()" />
      <area id="1006" shape="rect" coords="1069,721,1099,741" href="javascript:void(0)" @click="t()" />
    </map>
  </div>
</template>
<script>
export default {
  name: 'airConditioning',
  data() {
    return {
      src: require('../../../../public/img/safetyManagement.jpg')
    };
  },
  created() {},
  mounted() {
    var test = document.getElementById('wrap');
    test.onmousemove = function (e) {
      var x = e.layerX;
      var y = e.layerY;
      e.target.title = 'X is ' + x + ' and Y is ' + y;
    };
  },
  methods: {
    a() {
      this.$message.info('D0-001开')
    },
    b(){
      this.$message.info('D0-001关')
    },
    c() {
      this.$message.info('D0-002开')
    },
    d(){
      this.$message.info('D0-002关')
    },
    e() {
      this.$message.info('D0-009开')
    },
    f(){
      this.$message.info('D0-009关')
    },
    h() {
      this.$message.info('D0-003开')
    },
    i(){
      this.$message.info('D0-003关')
    },
    j() {
      this.$message.info('D0-004开')
    },
    k(){
      this.$message.info('D0-004关')
    },
    m() {
      this.$message.info('D0-005开')
    },
    n(){
      this.$message.info('D0-005关')
    },
    o() {
      this.$message.info('D0-006开')
    },
    p(){
      this.$message.info('D0-006关')
    },
    q() {
      this.$message.info('D0-007开')
    },
    r(){
      this.$message.info('D0-007关')
    },
    s() {
      this.$message.info('D0-008开')
    },
    t(){
      this.$message.info('D0-008关')
    },
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 50px;
  width: 1722px;
  height: 795px;
}
</style>
